<template>
  <div style="background:#eaf4fe;padding:8px 0 0 0;">
    <div style="background:#eaf4fe;padding:0 0 8px 24px;">
      <span style="font-weight:bold;">首页</span>
      <span style="margin:0 8px;">&gt;</span>
      <span style="font-weight:bold;">仓库信息</span>
    </div>
  </div>
      <div style="background:#eaf4fe;padding:24px 0 0 0;">
        <el-form :inline="true" :model="filters" class="filter-form" size="small">
          <el-form-item label="仓库">
            <el-input v-model="filters.keyword" placeholder="请输入仓库" clearable/>
          </el-form-item>
          <el-form-item label="库管部门">
            <el-input v-model="filters.department" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="仓库主管">
            <el-input v-model="filters.manager" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>

        <div style="margin: 10px 0;">
           <el-button type="primary" @click="onAddWarehouse">新增</el-button>
          <el-button type="success" disabled>编辑</el-button>
          <el-button type="info" disabled>启用</el-button>
          <el-button type="warning" disabled>停用</el-button>
          <el-button type="default" disabled>验证</el-button>
        </div>


        <!-- 表格 -->
        <el-table
            :data="tableData"
            border
            style="width: 100%;"
            @selection-change="onSelectionChange"
        >
            <el-table-column type="selection" width="40" />
            <el-table-column prop="warehouseNo" label="仓库编号" width="120" />
            <el-table-column prop="warename" label="仓库名称" width="120" />
            <el-table-column prop="capacity" label="仓库容量" width="120" />
            <el-table-column prop="wdepartment" label="库管部门" width="120" />
            <el-table-column prop="wsupervisor" label="仓库主管" width="120" />
            <el-table-column prop="wphone" label="联系电话" width="120" />
            <el-table-column prop="waddress" label="仓库地址" width="120" />
            <el-table-column prop="wsorting" label="数量" width="120" />
            <el-table-column prop="wsortingmax" label="最大数量" width="120" />
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <el-button type="text" size="small" @click=""></el-button>
                    <el-button type="text" size="small" @click="onDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页控件 -->
        <div style="margin-top: 16px; text-align: right;">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
                :page-size="pagination.pageSize"
                :current-page="pagination.page"
                :page-sizes="[5, 10, 20, 50]"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            />
        </div>
    </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ajaxUpload } from 'element-plus/es/components/upload/src/ajax.mjs';
import { onMounted, ref } from 'vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import service from '@/utils/request';

const router = useRouter()


// const dialogTableVisible = ref(false)
// const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  warename: '',
  capacity: '',
  wdepartment: '',
  wsupervisor: '',
  wphone: '',
  waddress: '',
  wsorting: '',
  wsortingmax: '',
})


const filters = ref({
    keyword: '',
    status: '',
    department: '',
    manager: '',
})

// 分页参数
const pagination = ref({
  page: 1,
  pageSize: 5,
  total: 0
})

function onSearch() {
    // 查询时重置到第一页
    pagination.value.page = 1;
    // 前端模糊查询
    let filtered = allData.value;
    const { keyword, department, manager } = filters.value;
    if (keyword) {
      filtered = filtered.filter(item =>
        (item.warename && item.warename.includes(keyword)) ||
        (item.warehouseNo && item.warehouseNo.includes(keyword))
      );
    }
    if (department) {
      filtered = filtered.filter(item =>
        item.wdepartment && item.wdepartment.includes(department)
      );
    }
    if (manager) {
      filtered = filtered.filter(item =>
        item.wsupervisor && item.wsupervisor.includes(manager)
      );
    }
    pagination.value.total = filtered.length;
    const start = (pagination.value.page - 1) * pagination.value.pageSize;
    const end = start + pagination.value.pageSize;
    tableData.value = filtered.slice(start, end);
}
function onReset() {

}


const allData = ref<any[]>([])
const tableData = ref<any[]>([])
onMounted(() => {
    GetData();
})

const GetData = () => {
    // 构建查询参数
    const params = {
      page: pagination.value.page,
      pageSize: pagination.value.pageSize,
      keyword: filters.value.keyword,
      department: filters.value.department,
      manager: filters.value.manager
    };
    service.get("/api/app/warehouse/ware", { params })
      .then(res => {
        let data = res.data;
        // 兼容后端返回数组或对象
        if (data && Array.isArray(data.items)) {
          data = data.items;
        }
        allData.value = data;
        pagination.value.total = data.length || 0;
        updateTableData();
      })
}


function updateTableData() {
  const start = (pagination.value.page - 1) * pagination.value.pageSize;
  const end = start + pagination.value.pageSize;
  tableData.value = allData.value.slice(start, end);
}

// 分页切换
function handleCurrentChange(val: number) {
  pagination.value.page = val;
  updateTableData();
}

function handleSizeChange(val: number) {
  pagination.value.pageSize = val;
  pagination.value.page = 1;
  updateTableData();
}

function onAddWarehouse() {
    // 跳转到新增仓库页面
  router.push({ path: '/AddWarehouse' });
}

function onEdit(row: any) {
    
}

function onDelete(row: any) {
     ElMessageBox.confirm(
    '你确定要删除吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      service.delete('/api/app/warehouse/'+row.warehouseNo+'/ware')
      .then(res => {
        if (res.data.code == 200) {
          ElMessage.success('删除成功');
          GetData();
        } else {
          ElMessage.error('删除失败');
        }
      })
    .catch(err => {
        ElMessage.error('删除失败');
        console.log(err);
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除被取消',
      })
    })
}

function onCreate() {
    
}

function onSelectionChange() {

}

// ...existing code...
</script>
<style scoped>
body, .warehouse-bg {
  background: #eaf4fe !important;
}
</style>

